<template>
  <div class="faq-contact">
    <div class="sci-fi-container">
      <!-- <div class="sci-fi-header">
        <h1 class="glow-text">常见问题 & 联系我们</h1>
        <div class="sci-fi-decor"></div>
      </div> -->

      <div class="tab-container">
        <div class="tab-header">
          <div :class="['tab-item', activeTab === 'faq' ? 'active' : '']" @click="activeTab = 'faq'">
            常见问题
          </div>
          <div :class="['tab-item', activeTab === 'contact' ? 'active' : '']" @click="activeTab = 'contact'">
            联系我们
          </div>
        </div>

        <!-- 常见问题面板 -->
        <div v-if="activeTab === 'faq'" class="panel faq-panel">
          <div class="search-container">
            <div class="search-box">
              <input type="text" v-model="searchQuery" placeholder="搜索常见问题..." class="search-input"
                @input="filterFAQs" />
              <div class="search-icon">
                <div class="icon-search"></div>
              </div>
            </div>
          </div>

          <div class="category-filter">
            <div v-for="(category, idx) in categories" :key="idx"
              :class="['category-item', activeCategory === category.id ? 'active' : '']"
              @click="setCategory(category.id)">
              {{ category.name }}
            </div>
          </div>

          <div class="faq-list">
            <div v-if="filteredFAQs.length === 0" class="no-results">
              <p>没有找到相关问题，请尝试其他关键词</p>
            </div>
            <div v-for="(item, index) in filteredFAQs" :key="index" class="faq-item"
              :class="{ expanded: expandedQuestion === index }">
              <div class="faq-question" @click="toggleQuestion(index)">
                <div class="question-icon">
                  <div class="icon-line" :class="{ 'rotate-90': expandedQuestion === index }"></div>
                  <div class="icon-line horizontal"></div>
                </div>
                <h3>{{ item.question }}</h3>
              </div>

              <div class="faq-answer" :class="{ show: expandedQuestion === index }">
                <div class="answer-content">
                  <p v-for="(paragraph, i) in item.answer" :key="i">{{ paragraph }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系我们面板 -->
        <div v-if="activeTab === 'contact'" class="panel contact-panel">
          <div class="contact-methods">
            <div class="contact-card">
              <div class="contact-card-header">
                <h3>售后微信</h3>
              </div>
              <div class="contact-card-body">
                <div class="qr-code-container" @click="showPreview(lxfsImage)">
                  <img :src="lxfsImage" alt="微信二维码" class="qr-code" />
                  <div class="qr-overlay"></div>
                </div>
                <p>扫描上方二维码添加我们的售后微信</p>
                <p class="wechat-id">微信号: <span>suniu-niuniuniu</span></p>
                <div class="copy-button" @click="copyToClipboard('suniu-niuniuniu')">
                  <span>复制微信号</span>
                </div>
              </div>
            </div>

            <!-- <div class="contact-card">
              <div class="contact-card-header">
                <h3>小红书账号</h3>
              </div>
              <div class="contact-card-body">
                <div class="social-links">
                  <a href="https://www.xiaohongshu.com/user/profile/63da5950000000001001d3ff" 
                     target="_blank" 
                     class="social-button xiaohongshu-button">
                    <span class="icon">📱</span>
                    <span class="text">速牛智能车改装</span>
                  </a>
                  <a href="https://www.xiaohongshu.com/user/profile/5b5c36aee8ac2b442d01d397" 
                     target="_blank" 
                     class="social-button xiaohongshu-button">
                    <span class="icon">🛠️</span>
                    <span class="text">速牛改装店</span>
                  </a>
                </div>
                <p class="social-description">关注我们的小红书账号，获取更多改装技巧和案例分享</p>
              </div>
            </div> -->
          </div>


        </div>

      </div>
      <p class="see_more">{{ activeTab === 'faq' ? '向下滚动查看更多问题' : '谦虚鼎力支持' }}</p>

      <div class="sci-fi-footer">

        <div class="sci-fi-decor"></div>
      </div>
    </div>
    <div class="custom-bubble" @click="openXiaohongshu">
      <div class="bubble-content">
        <img src="@/assets/shu.png" alt="小红书">
        <div class="pulse-ring"></div>
      </div>
      <div class="bubble-text">更多资讯</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import lxfsImage from '@/assets/lxfs.jpg';
import { showImagePreview, showSuccessToast, showFailToast } from 'vant';

const showPreview = (src) => {
  showImagePreview({
    images: [src],
    closeable: true,
  });
}

// 状态变量
const activeTab = ref('faq');
const expandedQuestion = ref(null);
const searchQuery = ref('');
const activeCategory = ref('all');

// FAQ分类
const categories = [
  { id: 'all', name: '全部' },
  { id: 'battery', name: '电池相关' },
  { id: 'motor', name: '电机相关' },
  { id: 'controller', name: '控制器相关' },
  { id: 'usage', name: '使用指南' },
  { id: 'troubleshooting', name: '故障排查' }
];

// 常见问题列表
const faqList = [
  {
    category: 'battery',
    question: "原厂铅酸电池使用注意事项",
    answer: [
      "使用铅酸电池时需要注意以下关键点：",
      "1. 保险丝限制：",
      "   - 原厂铅酸72V的保险丝通常只有50安",
      "   - 更换控制器后建议将放电母线电流设置不超过50安",
      "   - 超过限制可能导致保险丝烧断",
      "",
      "2. 使用风险：",
      "   - 可能在1-2小时或1-2个月内烧断保险丝",
      "   - 烧保险丝表现：骑行中仪表报欠压，之后无法启动",
      "",
      "重要提示：不建议铅酸电池长期使用改装控制器"
    ]
  },
  {
    category: 'battery',
    question: "第三方锂电池使用指南",
    answer: [
      "第三方锂电池使用要点：",
      "",
      "1. 电压规格：",
      "   - 支持48V、52V、60V、72V、76V等规格",
      "   - 例如72120代表72V/120Ah",
      "",
      "2. 保护板考量：",
      "   - 控制器选择主要看保护板规格",
      "   - 以蚂蚁325保护板为例：持续电流130A",
      "   - 超过保护板额定电流会触发保护（骑行中断电，重启后恢复）",
      "",
      "选择建议：根据保护板持续电流选择合适的控制器参数"
    ]
  },
  {
    category: 'battery',
    question: "换电电池使用说明",
    answer: [
      "换电电池使用注意事项：",
      "",
      "1. 控制器选择：",
      "   - 更换换电电池通常需要更换控制器",
      "   - 必须了解换电电池保护板规格",
      "",
      "2. 电流设置：",
      "   - 50A换电最大母线电流设为49A",
      "   - 80A换电最大母线电流可设为79A",
      "   - 电流差异会导致明显的速度差异",
      "",
      "3. 特别注意：",
      "   - 部分换电电池不支持反充电",
      "   - 建议关闭动能回收功能"
    ]
  },
  {
    category: 'motor',
    question: "原厂电机功率计算与使用",
    answer: [
      "原厂电机使用指南：",
      "",
      "1. 功率计算公式：",
      "   电机功率 × 3 = 最大母线电流 × 电压",
      "",
      "2. 实例计算：",
      "   - AE5（2000W）：2000×3/72 ≈ 83.3A，极限约90A",
      "   - 九号M95C（1500W）：1500×3/72 ≈ 62.5A，极限约70A",
      "",
      "3. 超出功率影响：",
      "   - 速度提升不明显",
      "   - 增加电机损坏风险"
    ]
  },
  {
    category: 'motor',
    question: "改装电机选择与计算",
    answer: [
      "改装电机类型与计算：",
      "",
      "1. 常见类型：",
      "   - 普通电机",
      "   - 瓦片电机",
      "   - 侧挂电机",
      "   - 中置电机",
      "",
      "2. 瓦片电机计算示例（2000W）：",
      "   - 计算公式：功率×6/电压",
      "   - 2000×6/72 ≈ 166.7A最大母线电流",
      "   - 适合搭配速牛450控制器（200A母线电流）"
    ]
  },
  {
    category: 'controller',
    question: "速牛控制器型号选择指南",
    answer: [
      "速牛控制器型号对比（基于72V锂电）：",
      "",
      "1. 72290型号：",
      "   - 母线85A，相线290A",
      "   - 适配2000W以下电机",
      "",
      "2. 72350型号：",
      "   - 母线120A，相线350A",
      "   - 适配3000W以下电机",
      "   - 可勉强带动2000W瓦片",
      "",
      "3. 72450型号：",
      "   - 母线200A，相线450A",
      "   - 适配2000W瓦片以下",
      "   - 可勉强带动3000W瓦片",
      "",
      "4. 72700型号：",
      "   - 母线250A，相线700A",
      "   - 适配3000W瓦片以下",
      "   - 可勉强带动5000W瓦片"
    ]
  },
  {
    category: 'controller',
    question: "速牛控制器固件升级指南",
    answer: [
      "控制器固件升级步骤：",
      "",
      "1. 基本步骤：",
      "   - 连接控制器蓝牙",
      "   - 进入信息页面",
      "   - 点击固件更新",
      "   - 选择云端检测",
      "",
      "2. 注意事项：",
      "   - 更新时保持页面不退出",
      "   - 确保车辆不断电",
      "   - 重大版本更新后需恢复出厂设置",
      "   - 更新失败可重复操作或联系售后"
    ]
  },
  {
    category: 'controller',
    question: "速牛控制器参数调整指南",
    answer: [
      "控制器参数调整要点：",
      "",
      "1. 电压参数：",
      "   - 根据电池电压修改控制器电压参数",
      "",
      "2. 电流参数：",
      "   - 根据电池保护板和电机瓦数设置",
      "   - 相线电流设置为母线放电电流的3-3.5倍",
      "",
      "3. 弱磁参数：",
      "   - 根据所需速度修改峰值转速",
      "   - 开启自动弱磁使能",
      "   - 速度计算公式：极速=轮胎周长×峰值转速×0.9×60/1000",
      "",
      "4. 档位参数：",
      "   - 根据车型图修改档位模式",
      "   - 调整转速比例和限流比例",
      "   - 可根据需要修改启动系数（0-100）"
    ]
  },
  {
    category: 'usage',
    question: "车辆性能提升要点",
    answer: [
      "提升车辆性能的关键考虑：",
      "",
      "1. 木桶效应原理：",
      "   - 整车性能取决于最低配置",
      "   - 仅更换控制器可能无法达到预期效果",
      "",
      "2. 合理搭配建议：",
      "   - 根据电机功率选择合适控制器",
      "   - 原厂电机不建议使用450/700系列",
      "   - 过大电流会加速电机损坏",
      "",
      "3. 安全提示：",
      "   - 更换大功率需更换更粗线路",
      "   - 建议寻找专业机构改装",
      "   - 避免自行改装导致安全隐患"
    ]
  }
];

// 计算属性：过滤后的FAQ列表
const filteredFAQs = computed(() => {
  let result = faqList;

  // 分类过滤
  if (activeCategory.value !== 'all') {
    result = result.filter(item => item.category === activeCategory.value);
  }

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(item =>
      item.question.toLowerCase().includes(query) ||
      item.answer.some(ans => ans.toLowerCase().includes(query))
    );
  }

  return result;
});

// 方法
function toggleQuestion(index) {
  if (expandedQuestion.value === index) {
    expandedQuestion.value = null;
  } else {
    expandedQuestion.value = index;
  }
}

function setCategory(categoryId) {
  activeCategory.value = categoryId;
  expandedQuestion.value = null; // 切换分类时关闭展开的问题
}

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showSuccessToast('复制成功');
  } catch (err) {
    showFailToast('复制失败，请手动复制')
  }
}



const openXiaohongshu = () => {
  const userId = "647d54490000000011000164";
  const webUrl = `https://www.xiaohongshu.com/user/profile/${userId}`;
  window.location.href = webUrl;

};
</script>

<style lang="scss" scoped>
.faq-contact {
  color: #e0f7fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 15px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(circle at 20% 35%, rgba(255, 58, 58, 0.05) 0%, transparent 25%),
      radial-gradient(circle at 75% 65%, rgba(255, 58, 58, 0.05) 0%, transparent 25%),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="1" height="1" x="0" y="0" /><path fill="rgba(0,170,255,0.03)" d="M0,50 L100,50 M50,0 L50,100" /></svg>');
    background-size: cover, cover, 20px 20px;
    pointer-events: none;
    z-index: 0;
  }
}

.sci-fi-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: rgba(2, 13, 25, 0.5);
  border-radius: 12px;
  padding: 10px;
  // 
  box-shadow: 0 0 25px rgba(255, 58, 58, 0.25),
    0 0 5px rgba(255, 58, 58, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
  z-index: 1;
  max-width: 1200px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0));
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0));
  }
}

.sci-fi-header {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}

.glow-text {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 58, 58, 0.7),
    0 0 20px rgba(255, 58, 58, 0.5),
    0 0 30px rgba(255, 58, 58, 0.3);
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

.sci-fi-decor {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(255, 58, 58, 0),
      rgba(255, 58, 58, 0.8),
      rgba(255, 58, 58, 0));
}

.tab-container {
  position: relative;
  z-index: 1;
  flex: 1;
}

.tab-header {
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 18px 0;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  font-weight: 500;
  font-size: 17px;

  &:hover {
    background-color: rgba(255, 58, 58, 0.05);
  }

  &.active {
    color: rgba(255, 58, 58, 1);
    background-color: rgba(255, 58, 58, 0.15);

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: rgba(255, 58, 58, 1);
      box-shadow: 0 0 8px rgba(255, 58, 58, 0.8);
    }
  }
}

.panel {
  height: 65vh;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 8px 8px;
}

// FAQ 样式
.search-container {
  max-width: 800px;
  margin: 0 auto 15px;
  padding: 0 15px;
}

.search-box {
  position: relative;
  width: 100%;
  height: 36px;
  background: rgba(2, 13, 25, 0.3);
  border: 1px solid rgba(255, 58, 58, 0.2);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s;

  &:focus-within {
    border-color: rgba(255, 58, 58, 0.6);
    box-shadow: 0 0 10px rgba(255, 58, 58, 0.15);
    background: rgba(2, 13, 25, 0.4);
  }
}

.search-input {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;

  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }

  &:focus {
    outline: none;
  }
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.6;

  .icon-search {
    position: relative;
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(255, 58, 58, 0.8);
    border-radius: 50%;

    &::after {
      content: '';
      position: absolute;
      width: 1.5px;
      height: 5px;
      background: rgba(255, 58, 58, 0.8);
      bottom: -4px;
      right: -2px;
      transform: rotate(-45deg);
    }
  }
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto 15px;
  padding: 0 5px;
}

.category-item {
  padding: 6px;
  background: rgba(2, 13, 25, 0.3);
  border: 1px solid rgba(255, 58, 58, 0.2);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 13px;
  min-width: 50px;
  text-align: center;
  box-sizing: border-box;

  &:hover {
    border-color: rgba(255, 58, 58, 0.4);
    color: rgba(255, 58, 58, 0.8);
    background: rgba(255, 58, 58, 0.05);
  }

  &.active {
    background: rgba(255, 58, 58, 0.1);
    border-color: rgba(255, 58, 58, 0.6);
    color: rgba(255, 58, 58, 1);
    font-weight: 500;
    box-shadow: 0 0 8px rgba(255, 58, 58, 0.2);
  }
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

// 更新FAQ列表样式以匹配新设计
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 5px;
}

.faq-item {
  background-color: rgba(2, 13, 25, 0.3);
  border: 1px solid rgba(255, 58, 58, 0.15);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s;

  &:hover {
    border-color: rgba(255, 58, 58, 0.3);
    background-color: rgba(2, 13, 25, 0.4);
  }

  &.expanded {
    background-color: rgba(2, 13, 25, 0.5);
    border-color: rgba(255, 58, 58, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .faq-question h3 {
      color: rgba(255, 58, 58, 0.9);
    }
  }
}

.faq-question {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s;
  }

  &:hover h3 {
    color: rgba(255, 58, 58, 1);
  }
}

.question-icon {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  position: relative;
  flex-shrink: 0;

  .icon-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: rgba(255, 58, 58, 1);
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 1px;

    &.horizontal {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    &.rotate-90 {
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 0;
    }
  }
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);

  &.show {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
  }
}

.answer-content {
  padding: 5px 20px 20px 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;

  p {
    margin: 10px 0;
  }
}

// 联系我们样式
.contact-methods {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.contact-card {
  flex: 1;
  background-color: rgba(2, 13, 25, 0.5);
  border: 1px solid rgba(255, 58, 58, 0.2);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  &:hover {
    border-color: rgba(255, 58, 58, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 0 15px rgba(255, 58, 58, 0.2);
    transform: translateY(-8px);
  }
}

.contact-card-header {
  background-color: rgba(255, 58, 58, 0.15);
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 58, 58, 0.2);
  position: relative;

  h3 {
    margin: 0;
    color: rgba(255, 58, 58, 1);
    font-size: 22px;
    font-weight: 500;
  }
}

.contact-icon-container {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  position: relative;
}

.contact-icon {
  width: 56px;
  height: 56px;
  background-color: rgba(2, 13, 25, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;

  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255, 58, 58, 0.8), rgba(255, 58, 58, 0.2));
    z-index: -1;
    animation: rotate 8s linear infinite;
  }

  i {
    font-size: 26px;
    color: rgba(255, 58, 58, 1);
  }

  .icon-wechat::before {
    content: '微';
  }

  .icon-group::before {
    content: '群';
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.contact-card-body {
  padding: 5px;
  text-align: center;
}

.qr-code-container {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  position: relative;
  border: 2px solid rgba(255, 58, 58, 0.3);
  padding: 5px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(255, 58, 58, 0.2);

  &::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: rgba(255, 58, 58, 1);
    border-style: solid;
    border-width: 0;
    z-index: 1;
  }

  &::before {
    top: -2px;
    left: -2px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  &::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: rgba(255, 58, 58, 1);
    border-style: solid;
    border-width: 0;
    bottom: -2px;
    right: -2px;
    border-bottom-width: 2px;
    border-right-width: 2px;
  }
}

.qr-code {
  width: 100%;
  height: 100%;
}

.qr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 58, 58, 0.1), transparent 70%);
}

.wechat-id,
.group-info {
  margin: 15px 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;

  span {
    color: rgba(255, 58, 58, 1);
    font-weight: 500;
    font-size: 17px;
  }
}

.copy-button {
  display: inline-block;
  background-color: rgba(255, 58, 58, 0.2);
  border: 1px solid rgba(255, 58, 58, 0.4);
  color: rgba(255, 58, 58, 1);
  padding: 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  font-weight: 500;

  &:hover {
    background-color: rgba(255, 58, 58, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 58, 58, 0.2);
  }

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:active::after {
    opacity: 1;
  }
}

.other-contact {
  margin-top: 40px;
  margin-bottom: 40px;
}

.section-title {
  color: rgba(255, 58, 58, 1);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 25px;
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0.1));
  }
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.contact-info-item {
  display: flex;
  align-items: center;
  background-color: rgba(2, 13, 25, 0.5);
  border: 1px solid rgba(255, 58, 58, 0.2);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    border-color: rgba(255, 58, 58, 0.4);
    background-color: rgba(2, 13, 25, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 58, 58, 0.1);
  }
}

.contact-info-icon {
  width: 46px;
  height: 46px;
  background-color: rgba(255, 58, 58, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  box-shadow: 0 0 10px rgba(255, 58, 58, 0.15);

  i {
    color: rgba(255, 58, 58, 1);
    font-size: 20px;
  }

  .icon-phone::before {
    content: '电';
  }

  .icon-email::before {
    content: '邮';
  }

  .icon-time::before {
    content: '时';
  }

  .icon-location::before {
    content: '地';
  }
}

.contact-info-content {
  flex: 1;
}

.contact-info-label {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.contact-info-value {
  color: rgba(255, 58, 58, 1);
  font-weight: 500;
  font-size: 16px;
}

/* 海报展示区域样式 */
.poster-showcase {
  margin-top: 40px;
}

.poster-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.poster-item {
  background-color: rgba(2, 13, 25, 0.5);
  border: 1px solid rgba(255, 58, 58, 0.2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 比例 */
  position: relative;

  &:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 58, 58, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 58, 58, 0.2);
  }
}

.poster-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.sci-fi-footer {
  position: relative;
  padding-top: 10px;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(45deg, rgba(255, 58, 58, 0.2), rgba(255, 58, 58, 0.1));
  border: 1px solid rgba(255, 58, 58, 0.4);
  padding: 15px 25px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, rgba(255, 58, 58, 0.3), rgba(255, 58, 58, 0.2));
    border-color: rgba(255, 58, 58, 0.6);
    box-shadow: 0 5px 15px rgba(255, 58, 58, 0.2);
  }

  &:active {
    transform: translateY(0);
  }

  .icon {
    font-size: 20px;
  }

  .text {
    font-size: 16px;
    font-weight: 500;
  }

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:active::after {
    opacity: 1;
  }
}

.social-description {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-align: center;
}

.xiaohongshu-button {
  background: linear-gradient(45deg, rgba(255, 58, 58, 0.25), rgba(255, 58, 58, 0.15));

  &:hover {
    background: linear-gradient(45deg, rgba(255, 58, 58, 0.35), rgba(255, 58, 58, 0.25));
  }
}

/* 淡入淡出*/
@keyframes bubbleFloat {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

.custom-bubble {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.3s ease;

  &::before {
    position: absolute;
    top: -2px;
    right: 17px;
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ff4756c5;

    opacity: 0;
    transform: rotate(30deg) translateY(0);

    animation: bubbleFloat 2s linear infinite;
  }

  &::after {
    content: "点我";
    position: absolute;
    top: -21px;
    right: -8px;
    background-color: #ff4757;
    color: white;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: none;

    opacity: 0;
    transform: translateY(0);

    animation: bubbleFloat 1.8s linear infinite;
  }
}

.bubble-content {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 58, 58, 0.9);
  // background-color: rgba(255, 58, 58, 0.15);
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;

  img {
    width: 90%;
    height: 18px;
    // object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }
}

.pulse-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 58, 58, 0.6);
  animation: pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.4;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.bubble-text {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to right, rgba(255, 58, 58, 0.9), rgba(255, 58, 58, 0.7));
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 58, 58, 0.3);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 58, 58, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 58, 58, 0.3);
  }
}

@media (max-width: 480px) {
  .glow-text {
    font-size: 24px;
  }

  .tab-item {
    padding: 15px 0;
    font-size: 16px;
  }

  .panel {
    padding: 15px 0px;
  }

  .faq-question h3 {
    font-size: 16px;
  }

  .answer-content {
    padding: 0 15px 15px 15px;
  }

  .contact-icon {
    width: 50px;
    height: 50px;
  }

  .qr-code-container {
    width: 100%;
    height: 280px;
  }

  .section-title {
    font-size: 20px;
  }
}

.see_more {
  text-align: center;
}
</style>